import  React from "react";
import  propTypes, { string } from "prop-types";
import "./NavigationBar.css";
import backIcon from "../assets/jiantouarrowhead7.png";

class NavigationBar extends React.Component{
  // 构造函数 

  constructor(props){
    //props 只用来传递和接受数据 不可改变的 
    super(props);
    this.state  = {
      title:"",
      isShowBack:true,
      rightIcon:"",
      rightTitle:""
    }
  }

  componentWillMount(){
    this.setState({
      title:this.props.title,
      isShowBack:this.props.isShowBack,
      rightIcon:this.props.rightIcon,
      rightTitle:this.props.rightTitle
    })
  }

  render(){
    return(
      <div className="navigation_bar_container">
        <div className="navigation_bar_wrapper">
          <div className="navigation_bar_back_container">
            <div className={this.state.isShowBack?"navigation_bar_back":"navigation_bar_back_hidden"}>
              <div className="navigation_bar_back_icon">
                <img src={backIcon}/>
              </div>
              <div>返回</div>
            </div>
          </div>
          <div className="navigation_bar_title">{this.state.title}</div>
          <div className="navigation_bar_right"
          onClick={()=>{
            this.props.onClickRightButton("跨组件传递的数据");
          }}>
            <div>
              <img src={this.state.rightIcon}/>
            </div>
            <div>{this.state.rightTitle}</div>
          </div>
        </div>
        <div>
        </div>
      </div>
    )
  }
}

NavigationBar.propTypes = {
  title:propTypes.string,
  title:function(props){
    console.log(props);
    if(props.title.length > 6){
      return  new Error("超过4个字符");
    }
  },
  isShowBack:propTypes.bool,
  rightIcon:propTypes.string,
  rightTitle:propTypes.string,
  onClickRightButton:propTypes.func
}

NavigationBar.defaultProps = {
  title:"我是默认"
}


export default NavigationBar;
